<template>
	<view class="content">
		<!-- 分类的标题 -->
		<view class="index-top" v-if="op == 'type'">
			 <view>
				 <view class="icon-index-left flex-center-center" @tap="goBack">
				 	<image src="/static/image/leftblack.png" mode=""></image>
				 </view>
			 </view>
			 <view class="index-top-text"><text class="font36 color333">{{title}}</text></view>
			 <view class="index-top-op flex-center">
				<image class="icon-index-sousuo" src="/static/image/sousuo.png" mode=""
					@tap="search"></image>
			 </view>
		</view>
		<!-- 搜索结果的标题 -->
		<view class="search-box flex-center-between" v-if="op == 'search'">
			<view class="search-input" @tap="goBack">
				<input type="text" placeholder="请输入你需要的关键词" disabled
					v-model.trim="title" class="font32 color333"
					placeholder-class="placeholder-class" confirm-type="search">
				<image v-show="title != ''" src="/static/image/delete.png" mode=""></image>
			</view>
			<view class="search-btn font32" @tap="goBack">取消</view>
		</view>
		
		<view class="navbar">
			<view class="nav-item" :class="{ current: filterIndex === 0 }" @tap="tabClick(0)">综合</view>
			<view class="nav-item" :class="{ current: filterIndex === 1 }" @tap="tabClick(1)">销量</view>
			<view class="nav-item" :class="{ current: filterIndex === 2, currentoffset: filterIndex === 2 }" @tap="tabClick(2)">
				<text>价格</text>
				<view class="p-box flex-column">
					<text :class="{'icon-shang-jian-a': priceOrder === 1 && filterIndex === 2}"
						class="icon-shang-jian"></text>
					<text :class="{'icon-xia-jian-a': priceOrder === 2 && filterIndex === 2}" 
						class="icon-xia-jian"></text>
				</view>
			</view>
			<view class="nav-item" @tap="toggleCateMask('show')">筛选</view>
			<view class="nav-toggle flex-center-center" @tap="toShowMode()">
				<text class="showtwo" :class="{showfour: current == 0}"></text>
			</view>
		</view>
		<!-- 表格图片显示 -->
		<view class="goods-list flex-wrap" v-show="current === 0 && showShop">
			<view v-for="(item, index) in goodsList" :key="index" class="goods-item flex-column" @tap="navToDetailPage(item)">
				<view class="image-wrapper"><image :src="item.pic" mode="aspectFill"></image></view>
				<text class="title font28 color333 show-two-text">{{ item.name }}</text>
				<view class="price-box flex-center-between">
					<text class="price">￥{{ item.price }}</text>
					<text>{{ item.sale | numFormat }}人付款</text>
				</view>
			</view>
		</view>
		<!-- 列表显示 -->
		<view class="goods-list-vertical flex-wrap" v-show="current === 1 && showShop">
			<view v-for="(item, index) in goodsList" :key="index" 
				class="goods-item-vertical flex-center" @tap="navToDetailPage(item)">
				<view class="image-wrapper-vertical flex-center-center">
					<image :src="item.pic" mode="aspectFill"></image>
				</view>
				<view class="goods-list-right flex-column-between">
					<view class="goods-right-top show-two-text">
						<text class="font28 color333">{{ item.name }}</text>
					</view>
					<view class="goods-right-bottom flex-column">
						<text class="price">￥{{ item.price }}</text>
						<text class="sale">{{ item.sale | numFormat }}人付款</text>
					</view>
				</view>
			</view>
		</view>

		<uni-load-more v-show="showShop" :status="loadingType"></uni-load-more>
		
		<!-- 无数据展示 -->
		<view class="nogoods flex-center-center" v-if="!showShop">
			<view class="nogoods-content">
				<image src="/static/image/nodata.png" mode=""></image>
				<view class="font32 color333">
					暂无搜索到相关内容
				</view>
			</view>
		</view>
		
		<!-- 筛选展示 -->
		<view class="cate-mask" :class="cateMaskState === 0 ? 'none' : cateMaskState === 1 ? 'show' : ''" 
			@tap="toggleCateMask" @touchmove.stop.prevent="">
			<view class="cate-content" @tap.stop.prevent="">
				<scroll-view scroll-y class="cate-list">
					<view class="cate-listz" v-for="(item, index) in cateList" :key="index">
						<view class="cate-title flex-center-between">
							<text class="font28 color333 fontb">{{ item.title }}</text>
							<text class="icon-cate-down" v-if="item.arr.length > 6" 
								:class="{'icon-cate-top': item.show}" @tap="showAllType(index)"></text>
						</view>
						<view class="flex-wrap">
							<view v-for="val in item.arr"  class="cate-type-border"
								:key="val.id" @tap="changeCate(val, index)">
								<view class="cate-type font24 color333"  v-show="val.show"
									:class="{ 'active': (index === 0 && brandId === val.id) || (index === 1 && areaId === val.id)}">
									{{ val.name }}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="cate-content-btn flex-center">
					<button type="warn" class="cate-btn-reset font28" @tap="reset">重置</button>
					<button type="warn" class="cate-btn-ok font28" @tap="toggleCateMask">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import Api from '@/common/api';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
	data() {
		return {
			op: '', // type分类 search搜索结果
			title: '', // 分类名称
			cateId: 0, // 商品分类的id
			keyword: '', // 搜索的关键字
			pageNum: 1, // 当前页数
			filterIndex: 0, // 综合0，销量1，价格2
			priceOrder: 0, //1 价格从低到高 2价格从高到低
			cateList: [], // 筛选的数据
			goodsList: [], // 商品的数据
			current: 0, // 1为列表模式
			loadingType: 'more', //加载更多状态
			cateMaskState: 0, //分类面板展开状态
			showShop: true, // 默认展示商品
			brandId: 0, // 品牌id
			areaId: 0, // 发货地id
		};
	},
	onLoad(options) {
		this.op = options.op
		this.title = options.name
		if(this.op === 'type') { // 分类
			this.cateId = options.num
		}else if(this.op === 'search') { // 搜索结果
			this.keyword = options.name
		}
		this.loadCateList()
		this.loadData()
	},
	//加载更多
	onReachBottom() {
		this.pageNum = this.pageNum + 1
		this.loadData()
	},
	methods: {
		// 返回
		goBack() {
			uni.navigateBack({
				delta: 1,
				animationType: 'pop-out',
				animationDuration: 200
			})
		},
		// 页面跳转
		navToTabPage(url) {
			uni.navigateTo({
				url: url
			})
		},
		// 跳转到搜索
		search() {
			uni.redirectTo({
				url: '/pages/search/search'
			})
		},
		// 切换展示方式
		toShowMode() {
			this.current = this.current == 0 ? 1 : 0
		},
		//加载筛选条件
		async loadCateList() {
			let params = {}
			if(this.op === 'type') { // 分类
				params.productCategoryId = this.cateId
			}else if(this.op === 'search') { // 搜索结果
				params.keyword = this.keyword
			}
			let list = await Api.apiEsCall('get', Api.goods.getsearchshopList, {
				keyword: this.keyword
			})
			if(!list) return
			// 品牌处理超过6个隐藏
			list.brandNames.map((item, index) => {
				index > 5 ? item.show = false : item.show = true
				item.name = item.brandName
				item.id = item.brandId
			})
			// 发货地处理超过6个隐藏
			list.areaNames.map((item, index) => {
				index > 5 ? item.show = false : item.show = true
				item.name = item.areaName
				item.id = item.areaId
			})
			this.cateList.push({
				title: '品牌',
				arr: list.brandNames,
				show: false // 展开和收起的箭头
			})
			this.cateList.push({
				title: '发货地',
				arr: list.areaNames,
				show: false // 展开和收起的箭头
			})
		},
		// 展示或收起所有的品牌或发货地
		showAllType(index) {
			// 展示或收起箭头改变
			this.cateList[index].show = !this.cateList[index].show
			this.cateList[index].arr.map((item, idx) => {
				if(this.cateList[index].show) {	// 要展示
					item.show = true
				}else { // 要收起
					idx > 5 ? item.show = false : item.show = true
				}
			})
		},
		//加载商品 ，上滑加载
		async loadData(type = 'add') {
			//没有更多直接返回
			if (type === 'add') {
				if (this.loadingType === 'nomore') {
					return
				}
				this.loadingType = 'loading'
			} else {
				this.loadingType = 'more'
			}
			let params = {}
			if(this.op === 'type') { // 分类
				params.productCategoryId = this.cateId
			}else if(this.op === 'search') { // 搜索结果
				params.keyword = this.keyword
			}
			// 品牌
			if(this.brandId) {
				params.brandId = this.brandId
			}
			// 发货地
			if(this.areaId) {
				params.areaId = this.areaId
			}
			params.pageIndex = this.pageNum
			params.pageSize = 10
			let sort = 0 // 默认综合
			if(this.filterIndex === 1) {// 销量
				sort = 2
			}else if(this.filterIndex === 2) {// 价格
				sort = this.priceOrder === 1 ? 3 : 4
			}
			params.sort = sort
			let list = await Api.apiEsCall('get', Api.goods.getgoodsList, params)
			if(!list) return
			let goodsList = list.recordList
			if (type === 'refresh') {
				this.goodsList = []
			}
			this.goodsList = this.goodsList.concat(goodsList)
			//暂无数据的显示或隐藏
			this.showShop = this.goodsList.length === 0 ? false : true
			//判断是否还有下一页
			this.loadingType = list.hasMore === 0 ? 'nomore' : 'more'
		},
		//筛选点击
		tabClick(index) {
			this.pageNum = 1;
			if (this.filterIndex === index && index !== 2) {
				return
			}
			this.filterIndex = index
			if (index === 2) {
				this.priceOrder = this.priceOrder === 1 ? 2 : 1;
			} else {
				this.priceOrder = 0
			}
			// 缓慢滑动到顶部
			uni.pageScrollTo({
				duration: 300,
				scrollTop: 0
			})
			this.loadData('refresh')
		},
		// 显示筛选面板
		toggleCateMask(type) {
			let timer = type === 'show' ? 10 : 300;
			let state = type === 'show' ? 1 : 0;
			this.cateMaskState = 2;
			setTimeout(() => {
				this.cateMaskState = state;
			}, timer);
		},
		// 筛选的选项点击
		changeCate(item, index) {
			this.pageNum = 1
			if(index === 0) {// 品牌
				this.brandId = this.brandId === item.id ? 0 :  item.id
			}else if(index === 1) { // 发货地
				this.areaId = this.areaId === item.id ? 0 :  item.id
			}
			uni.pageScrollTo({
				duration: 300,
				scrollTop: 0
			})
			this.loadData('refresh')
		},
		// 筛选重置按钮
		reset() {
			// 品牌
			this.brandId = 0
			// 发货地
			this.areaId = 0
			this.loadData('refresh')
		},
		//详情
		navToDetailPage(item) {
			//测试数据没有写id，用title代替
			let id = item.id;
			uni.navigateTo({
				url: `/pages/product/product?id=${id}`
			});
		},
	},
	components: {
		uniLoadMore
	},
}
</script>

<style lang="scss">
page {
	height: 100%;
	background:#f7f7f7;
	.content {
		height: 100%;
		padding-top: 198rpx;
	}
}

.index-top,
.search-box {
	width: 100%;
	height: 88rpx;
	background-color: #fff;
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9;
}

/* 标题栏 */
.index-top {
	view {
		flex: 1;
		.icon-index-left {
			width: 79rpx;
			height: 88rpx;
			image {
				width: 19rpx;
				height: 34rpx;
			}
		}
	}
	.index-top-text {
		flex: 3;
		line-height: 88rpx;
		text-align: center;
	}
	.index-top-op {
		justify-content: flex-end;
		.icon-index-sousuo {
			width: 42rpx;
			height: 40rpx;
			margin-right: 30rpx;
		}
	}
}

/* 搜索结果 */
.search-box {
	padding: 0 30rpx;
	.search-input {
		position: relative;
		input {
			width: 590rpx;
			height: 70rpx;
			letter-spacing: 1rpx;
			border: 0;
			border-radius: 32rpx;
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			padding: 0 76rpx 0 26rpx;
			margin: 0;
			background-color: #f5f5f5;
		}
		image {
			position: absolute;
			top: 17rpx;
			right: 20rpx;
			width: 36rpx;
			height: 36rpx;
		}
	}
	
	.placeholder-class {
		color: #9e9e9e;
	}
	
	.search-btn {
		width: 66rpx;
		height: 70rpx;
		line-height: 70rpx;
		color: #A66354;
	}
}

.navbar {
	position: fixed;
	left: 0;
	top: 88rpx;
	display: flex;
	padding-top: 20rpx;
	width: 100%;
	height: 110rpx;
	background: #fff;
	z-index: 9;
	.nav-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size: 28rpx;
		color: #AEA8A2;
		position: relative;
		&.current {
			font-weight: bold;
			color: #333;
			font-size: 34rpx;
			&:after {
				content: '';
				position: absolute;
				left: 30%;
				bottom: 0;
				width: 34rpx;
				height: 6rpx;
				background-color: #333;
				border-radius: 4rpx;
			}
		}
		&.currentoffset {
			&:after {
				left: 24%;
			}
		}
	}
	.nav-toggle {
		width: 90rpx;
		height: 100%;
		.showtwo {
			width: 30rpx;
			height: 30rpx;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-image: url('/static/image/showtwo.png');
		}
		.showfour {
			background-image: url('/static/image/showfour.png');
		}
	}
	.p-box {
		margin-left: 8rpx;
		.icon-shang-jian,
		.icon-xia-jian {
			width: 13rpx;
			height: 9rpx;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-image: url('/static/image/toparrows.png');
		}
		.icon-xia-jian {
			background-image: url('/static/image/toparrows.png');
			margin-top: 5rpx;
			transform: scaleY(-1);
		}
		.icon-shang-jian-a,
		.icon-xia-jian-a {
			background-image: url('/static/image/toparrowsa.png');
		}
	}
	.cate-item {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		width: 80upx;
		position: relative;
		font-size: 44upx;
		&:after {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 0;
			height: 36upx;
		}
	}
	
}

/* 商品表格 */
.goods-list {
	padding: 20rpx 30rpx 0;
	background: #f7f7f7;
	.goods-item {
		width: 334rpx;
		margin-bottom: 24rpx;
		background-color: #fff;
		border-radius: 8rpx;
		&:nth-child(2n + 1) {
			margin-right: 22rpx;
		}
		.image-wrapper {
			width: 100%;
			height: 334rpx;
			overflow: hidden;
			border-radius: 8rpx 8rpx 0 0;
			background-color: #fff;
			image {
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		.title {
			height: 110rpx;
			padding: 30rpx 20rpx 0;
			letter-spacing: 1.4rpx;
			line-height: 40rpx;
		}
		.price-box {
			height: 82rpx;
			padding: 0 20rpx;
			font-size: 24rpx;
			color: #888;
			.price {
				font-size: 28rpx;
				color: #FF1701;
				line-height: 82rpx;
			}
		}
		
	}
}
/* 商品列表垂直 */
.goods-list-vertical {
	padding: 20rpx 30rpx 0;
	background: #f7f7f7;
	.goods-item-vertical {
		width: 100%;
		height: 260rpx;
		border-radius: 8rpx;
		margin-bottom: 24rpx;
		background-color: #fff;
		.image-wrapper-vertical {
			width: 260rpx;
			height: 260rpx;
			image {
				width: 100%;
				height: 100%;
				border-radius: 8rpx 0 0 8rpx;
			}
		}
		.goods-list-right {
			width: 430rpx;
			height: 100%;
			padding: 24rpx;
			.goods-right-top {
				height: 80rpx;
				line-height: 40rpx;
				text {
					letter-spacing: 0.76rpx;
					text-overflow: -o-ellipsis-lastline;
				}
			}
			.goods-right-bottom {
				justify-content: flex-start;
				.price {
					font-size: 28rpx;
					color: #FF1701;
					margin-bottom: 24rpx;
				}
				.sale {
					color: #888;
					font-size: 24rpx;
				}
			}
		}
	}
}

/* 暂无数据展示 */
.nogoods {
	width: 100%;
	height: 100%;
	.nogoods-content {
		image {
			width: 374rpx;
			height: 289rpx;
			margin-bottom: 59rpx;
		}
		view {
			text-align: center;
		}
	}
}

/* 筛选展示 */
.cate-mask {
	position: fixed;
	left: 0;
	top: var(--window-top);
	bottom: 0;
	width: 100%;
	background: rgba(0, 0, 0, 0);
	z-index: 99;
	transition: 0.3s;

	.cate-content {
		width: 624rpx;
		height: calc(100% - 88rpx);
		margin-top: 88rpx;
		background: #fff;
		float: right;
		transform: translateX(100%);
		transition: 0.3s;
		
		.cate-list {
			height: calc(100% - 112rpx);
			padding: 30rpx 30rpx 0;
			.cate-listz {
				margin-bottom: 16rpx;
				.cate-title {
					width: 100%;
					height: 40rpx;
					line-height: 40rpx;
					margin-bottom: 30rpx;
					.icon-cate-down {
						width: 23rpx;
						height: 12rpx;
						background-size: 100% 100%;
						background-repeat: no-repeat;
						background-image: url('/static/image/downjianhui.png');
					}
					.icon-cate-top {
						transform: scaleY(-1);
					}
				}
				.cate-type-border {
					.cate-type {
						width: 172rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						padding: 0 26rpx;
						border-radius: 8rpx;
						background-color: #F7F8F9;
						border: 2rpx solid #F7F8F9;
						margin-bottom: 24rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					&:not(:nth-child(3n)){
						margin-right: 24rpx;
					}
					.active {
						background-color: rgba(200, 71, 57, 0.1);
						border: 2rpx solid #C84739;
					}
				}
			}
		}
		.cate-content-btn {
			margin: 16rpx 0 0 117rpx;
			.cate-btn-reset,
			.cate-btn-ok {
				width: 223rpx;
				height: 80rpx;
				border-radius: 8rpx;
				background-color: #C84739;
				border: 1rpx solid #C84739;
				border-radius: 40rpx;
			}
			.cate-btn-reset {
				background-color: #FFF;
				color: #C84739;
			}
		}
	}
	&.none {
		display: none;
	}
	&.show {
		background: rgba(0, 0, 0, 0.2);

		.cate-content {
			transform: translateX(0);
		}
	}
}
</style>
